// 柱状图模块
(function() {
    //  1实例化对象
    var myChart = echarts.init(document.querySelector(".bar .chart"));
    // 2 指定配置项和数据
    var option = {
        
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['运营线路条数', '运营线路长度'],
          textStyle: {
              color:"rgba(255,255,255,.6)"
          }
        },
        xAxis: [
          {
            type: 'category',
            data: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel:{
                color:"rgba(255,255,255,.6)",
                fontSize: '12'
            },
            axisLine:{
                show: false
            }
          }
        ],
        yAxis: [
           {
            type: 'value',
            name: '条',
            min: 0,
            max: 1400,
            interval: 200,
            axisLabel:{
                color:"rgba(255,255,255,.6)",
                fontSize: '12'
            },
            axisLine:{
                lineStyle:{
                    color:"rgba(255,255,255,.1)",
                }
            },
            splitLine:{
                lineStyle:{
                    color:"rgba(255,255,255,.1)",
                }
            }
          },
          {
            type: 'value',
            name: '万公里',
            min: 0,
            max: 2.5,
            interval: 0.5,
            axisLabel:{
                color:"rgba(255,255,255,.6)",
                fontSize: '12'
            },
            axisLine:{
                lineStyle:{
                    color:"rgba(255,255,255,.1)",
                }
            },
            splitLine:{
                show:false,

            }
          }
        ],
        series: [
          {
            name: '运营线路条',
            type: 'bar',
            barWidth:"35%",
            itemStyle:{
                normal:{
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 1,color: '#33cabb'},{offset: 0,color: '#3EACE5'}])
                    // color:"#2f89cf",
                },
            },
            data: [
              1118, 1175, 671, 551, 400, 677, 899, 131, 155, 467, 148
            ]
          },
          {
            name: '运营线路长度',
            type: 'line',
            lineStyle:{
                normal:{
                    color:"#99cc00",
                },
            },
            yAxisIndex: 1,
            data: [2.0, 2.2, 1.4, 1.0,0.8,1.0, 1.6, 0.2, 0.3, 1.0, 0.2]
          }
        ]
    };
  	$("#yylc").click(function(){
      $(this).css({"color":"#fff","background-color":"#55608f"});
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['运营线路条数'],
          textStyle: {
              color:"rgba(255,255,255,.6)"
          }
        },
        xAxis: [
          {
            type: 'category',
            data: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel:{
                color:"rgba(255,255,255,.6)",
                fontSize: '12'
            },
            axisLine:{
                show: false
            }
          }
        ],
        yAxis: [
           {
            type: 'value',
            name: '条',
            min: 0,
            max: 1400,
            interval: 200,
            axisLabel:{
                color:"rgba(255,255,255,.6)",
                fontSize: '12'
            },
            axisLine:{
                lineStyle:{
                    color:"rgba(255,255,255,.1)",
                }
            },
            splitLine:{
                lineStyle:{
                    color:"rgba(255,255,255,.1)",
                }
            }
          }
        ],
        series: [
          {
            name: '运营线路条',
            type: 'bar',
            barWidth:"35%",
            itemStyle:{
                normal:{
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 1,color: '#33cabb'},{offset: 0,color: '#3EACE5'}])
                    // color:"#2f89cf",
                },
            },
            data: [
              1118, 1175, 671, 551, 400, 677, 899, 131, 155, 467, 148
            ]
          }
        ]
    };
      
      myChart.clear();//清空以前的实例数据
      // 3 配置项给实例对象
      myChart.setOption(option);//重新设置
    });
    


    // 3 配置项给实例对象
    myChart.setOption(option);
    // 4 让图表跟随屏幕自动的去适应
    window.addEventListener('resize',function() {
        myChart.resize();
    });
})();
(function() {
    var myChart = echarts.init(document.querySelector(".line .chart"));
    var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['客运量', '增速'],
          textStyle: {
            color:"rgba(255,255,255,.6)"
        }
        },
        xAxis: [
          {
            type: 'category',
            data: ['2017年', '2018年', '2019年', '2020年', '2021年'],
            axisPointer: {
              type: 'shadow'
            },
            axisPointer: {
                type: 'shadow'
              },
              axisLabel:{
                  color:"rgba(255,255,255,.6)",
                  fontSize: '12'
              },
              axisLine:{
                  show: false
              }
          }
        ],
        yAxis: [
           {
            type: 'value',
            name: '亿人次',
            min: 32.5,
            max: 35.5,
            interval: 0.5,
            axisLabel:{
                color:"rgba(255,255,255,.6)",
                fontSize: '12'
            },
            axisLine:{
                lineStyle:{
                    color:"rgba(255,255,255,.1)",
                }
            },
            splitLine:{
                lineStyle:{
                    color:"rgba(255,255,255,.1)",
                }
            }
          },
          {
            type: 'value',
            name: '%',
            min: -4.0,
            max: 3.0,
            interval: 1.0,
            axisLabel:{
                color:"rgba(255,255,255,.6)",
                fontSize: '12'
            },
            axisLine:{
                lineStyle:{
                    color:"rgba(255,255,255,.1)",
                }
            },
            splitLine:{
                show:false,

            }
          }
        ],
        series: [
          {
            name: '客运量',
            type: 'bar',
            barWidth:"50%",
            itemStyle:{
                normal:{
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 1,color: '#33cabb'},{offset: 0,color: '#3EACE5'}])
                    // color:"#2f89cf",
                },
            },
            data: [
              35, 33.89, 33.79,33.45, 33.48
            ]
          },
          {
            name: '增速',
            type: 'line',
            yAxisIndex: 1,
            lineStyle:{
                normal:{
                    color:"#99cc00",
                },
            },
            data: [1.9, -3.0, -0.3, -1.0,0.1]
          }
        ]
      };
    // 3 配置项给实例对象
    myChart.setOption(option);
    // 4 让图表跟随屏幕自动的去适应
    window.addEventListener('resize',function() {
        myChart.resize();
    });
})();
(function() {
    var myChart = echarts.init(document.querySelector(".line2 .chart"));
    var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '4%',
          left: 'center',
          textStyle: {
            color:"rgba(255,255,255,.6)"
            }
        }, 
        series: [
          {
            name: 'Access From',
            color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
            type: 'pie',
            radius: '65%',
            center: ["50%", "60%"],
            data: [
              { value: 32.0, name: '纯电动客车' },
              { value: 30.3, name: '柴油车' },
              { value: 18, name: '天然气车' },
              { value: 17.8, name: '混合动力车' },
              { value: 1, name: '双燃料车' },
              { value: 0.6, name: '汽油车' },
              { value: 0.2, name: '无轨电车' },
              { value: 0.2, name: '其他' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
    // 3 配置项给实例对象
    myChart.setOption(option);
    // 4 让图表跟随屏幕自动的去适应
    window.addEventListener('resize',function() {
        myChart.resize();
    });
})();
(function() {
  var myChart = echarts.init(document.querySelector(".map .chart"));
  $.get('json/zhejiang.json',function(geoMap) {
    console.log(geoMap);
    echarts.registerMap('zhejiang',geoMap);
    var data= [
      {name: "杭州市", value: 480},
      {name: "湖州市", value: 39},
      {name: "嘉兴市", value: 152},
      {name: "宁波市", value: 89},
      {name: "舟山市", value: 120},
      {name: "丽水市", value: 52},
      {name: "衢州市", value: 70},
      {name: "金华市", value: 352},
      {name: "台州市", value: 99},
      {name: "绍兴市", value: 39},
      {name: "温州市", value: 199}
    ];
    var geoCoordMap = {
      "杭州市": [120.153576, 30.287459],
      "湖州市": [120.102398, 30.867198],
      "嘉兴市": [120.750865, 30.762653],
      "宁波市": [121.549792, 29.868388],
      "舟山市": [122.106863, 30.016028],
      "丽水市": [119.921786, 28.451993],
      "金华市": [119.649506, 29.089524],
      "台州市": [121.428599, 28.661378],
      "绍兴市": [120.582112, 29.997117],
      "温州市": [120.672111, 28.000575],
      "衢州市": [118.87263, 28.941708]
    };
      var max = 480, min = 9; // todo 
      var maxSize4Pin = 100, minSize4Pin = 20;

    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
              res.push({
                  name: data[i].name,
                  value: geoCoord.concat(data[i].value)
              });
          }
      }
      return res;
  };


      option = {
          tooltip: {
              trigger: 'item',
              formatter: function (params) {
                if(typeof(params.value)[2] == "undefined"){
                  return params.name + ' : ' + params.value;
                }else{
                  return params.name + ' : ' + params.value[2];
                }
              }
          },
          
          visualMap: {
              show: false,
              min: 0,
              max: 500,
              left: 'left',
              top: 'bottom',
              text: ['高', '低'], // 文本，默认为数值文本
              calculable: true,
              seriesIndex: [1],
              inRange: {
                  // color: ['#3B5077', '#031525'] // 蓝黑
                  // color: ['#ffc0cb', '#800080'] // 红紫
                  // color: ['#3C3B3F', '#605C3C'] // 黑绿
                  color: ['#073684', '#061E3D'] // 黑紫黑
                  // color: ['#23074d', '#cc5333'] // 紫红
                  // color: ['#00467F', '#A5CC82'] // 蓝绿
                  // color: ['#1488CC', '#2B32B2'] // 浅蓝
                  // color: ['#00467F', '#A5CC82'] // 蓝绿
                  // color: ['#00467F', '#A5CC82'] // 蓝绿
                  // color: ['#00467F', '#A5CC82'] // 蓝绿
                  // color: ['#00467F', '#A5CC82'] // 蓝绿

              }
          },
          // toolbox: {
          //     show: true,
          //     orient: 'vertical',
          //     left: 'right',
          //     top: 'center',
          //     feature: {
          //             dataView: {readOnly: false},
          //             restore: {},
          //             saveAsImage: {}
          //             }
          // },
          geo: {
              show: true,
              type:'map',
              map: 'zhejiang',
              zoom:1.2,
              label: {
                  normal: {
                      show: false,
                  },
                  emphasis: {
                      show: false,
                  }
              },
              roam: true,
              itemStyle: {
                  normal: {
                      areaColor: '#142957',
                      borderColor: '#0692a4',
                  },
                  emphasis: {
                      areaColor: '#0b1c2d',
                  }
              }
          },
          series : [
          {
              name: 'credit_pm2.5',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: convertData(data),
              symbolSize: function (val) {
                  return val[2] / 10;
              },
              label: {
                  normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: true
                  },
                  emphasis: {
                      show: true
                  }
              },
              itemStyle: {
                  normal: {
                      color: '#D4EEFF'
                  }
              }
          },
          {
              type: 'map',
              map: 'zhejiang',
              geoIndex: 0,
              aspectScale: 0.75, //长宽比
              showLegendSymbol: false, // 存在legend时显示
              label: {
                  normal: {
                      show: false
                  },
                  emphasis: {
                      show: false,
                      textStyle: {
                          color: '#fff'
                      }
                  }
              },
              roam: true,
              itemStyle: {
                  normal: {
                      areaColor: '#031525',
                      borderColor: '#3B5077',
                  },
                  emphasis: {
                      areaColor: '#2B91B7'
                  }
              },
              animation: false,
              data: data
          },
          {
              name: '点',
              type: 'scatter',
              coordinateSystem: 'geo',
              symbol: 'pin',
              symbolSize: function (val) {
                  var a = (maxSize4Pin - minSize4Pin) / (max - min);
                  var b = minSize4Pin - a*min;
                  b = maxSize4Pin - a*max;
                  return a*val[2]+b;
              },
              label: {
                  normal: {
                      show: true,
                      textStyle: {
                          color: '#fff',
                          fontSize: 9,
                      }
                  }
              },
              itemStyle: {
                  normal: {
                      color: '#C9C132', //标志颜色
                  }
              },
              zlevel: 6,
              data: convertData(data),
          },
          {
              name: 'Top 5',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: convertData(data.sort(function (a, b) {
                  return b.value - a.value;
              }).slice(0, 5)),
              symbolSize: function (val) {
                  return val[2] / 10;
              },
              showEffectOn: 'render',
              rippleEffect: {
                  brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                  normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: true
                  }
              },
              itemStyle: {
                  normal: {
                      color:'rgba(0,108,255,0.7)',
                      shadowBlur: 10,
                      shadowColor: '#05C3F9'
                  }
              },
              zlevel: 1
          },
          
      ]
      };
      myChart.setOption(option);
      window.addEventListener('resize',function() {
        myChart.resize();
      });
  });
    
  // // 监听浏览器缩放，图表对象调用缩放resize函数
  //   window.addEventListener("resize", function() {
  //   myChart.resize();
  //   })
  // })
})();
